<template >
  <div class="shop">
    <el-card class="el-card">
      <div style="text-align: right " >
        <h1 style="text-align: center " >商品审核</h1>
      </div>
      <el-divider />
      <div style="text-align: center " >
        <table >
          <thead >
          <tr>
            <th>图片</th>
            <th style="width: 400px">名字</th>
            <th style="width: 300px">日期</th>
            <th style="width: 150px">价格</th>
            <th style="width: 150px">状态</th>
            <!--              <th>总计{{total}}</th>-->
          </tr>
          </thead>
          <tbody  v-for="(value, index) in listsNoAllow" :key="index" >
          <tr >
            <td >
              <router-link :to="{path:'/user/shop/shopMain',query: {id: value.id}}">
                <img :src="value.img" style="width: 150px;height: 140px">
              </router-link>
            </td>
            <td>{{value.name}}</td>
            <td>{{value.time}}</td>
            <td>{{value.price}}</td>
            <td>
              <el-switch
                  v-model="value.allow"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                  :active-value = "1"
                  :inactive-value = "0"
                  @change="handleSwitch(value)"
              />
            </td>
          </tr>
          </tbody>
          <tbody  v-for="(value, index) in listsAllow" :key="index"  >
          <tr >
            <td >
              <router-link :to="{path:'/user/shop/shopMain',query: {id: value.id}}">
                <img :src="value.img" style="width: 150px;height: 140px">
              </router-link>
            </td>
            <td>{{value.name}}</td>
            <td>{{value.time}}</td>
            <td>{{value.price}}</td>
            <td >
              <el-switch
                  v-model="value.allow"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                  :active-value = "1"
                  :inactive-value = "0"
                  @change="handleSwitch(value)"
              />
            </td>

          </tr>
          </tbody>
        </table>


        </div>
    </el-card>

  </div>
</template>
<script  setup>
import {onBeforeMount, onMounted, ref} from 'vue'
import {Search,Star} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as goodsApi from '@/api/goods.js'
import router from "../../router";
import {ElNotification} from "element-plus";
const loading = ref(true)
const listsNoAllow = ref([])
const listsAllow = ref([])
const total = ref()
const value1 = ref()



function getPage(newpage){
  goodsApi.allowGoods(newpage).then(resp=>{
    lists.value =resp.data.data
  })
}

onBeforeMount(()=>{
    goodsApi.allowGoods(1).then(resp=>{
      listsNoAllow.value =resp.data.data
      total.value = resp.data.count
      })
    goodsApi.selectGoods(1).then(resp=>{
      listsAllow.value =resp.data.data
      total.value = resp.data.count
    })
})

onMounted(() => {
  loading.value = false
})

const handleSwitch=(value)=>{
  if (value.allow==1){
    ElMessage({
      message: '商品已启用',
      type: 'success',
    })
  }else {
    ElMessage({
      message: '商品已禁用',
      type: 'info',
    })
  }

  goodsApi.swAllow(value).then(resp=>{
  })
}
</script>
<style scoped>

  .shop{
    caret-color: transparent;

  }
  .el-row{
    margin-left: 70px;
    margin-top: 30px;
    justify-content: center;
    align-items: center;


  }
  .el-card{
    background-color: #d9ecff
  }

  .img{
    border-radius: 10px;
    width: 200px;
    height: 180px;
   text-align: center;
  }
  h1{
    font-family:STCaiyun;
    font-size:60px;
    margin: 0;
    color:  #fcd3d3;
  }
</style>
